@import url(lib.less);

* {
    margin: 0;
    padding: 0;
}

body {
    min-width: @pageWidth;
    position: relative;
    .color(@globalColor, @globalBg);
    font-family: 'Roboto', sans-serif;
}

#statusBar {
    width: 100%;
    height: 60px;
    > #logo {
        position: absolute;
        width: 204px;
        height: 40px;
        top: 10px;
        left: 20px;
        background: url(../img/logo.svg);
        cursor: pointer;
    }
    > #userInfo {
        position: absolute;
        height: 30px;
        padding: 15px;
        right: 0;
        font-size: 13px;
        line-height: 30px;
    }
}

header {
    position: relative;
    height: 50px;
    > #floatWrapper {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 50px;
        .color(@globalColor, @white);
        box-shadow: 0 .1em .1em lighten(@black, 50%);
        z-index: 999;
        &.float {
            position: fixed;
            bottom: auto;
        }
        > nav {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 200px;
            ul {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                list-style-type: none;
                display: block;
                box-shadow: 0 .1em .1em lighten(@black, 50%);
                li {
                    display: block;
                    a {
                        display: block;
                        font-size: 18px;
                        line-height: 20px;
                        padding: 15px 8px 15px 30px;
                        .color(@globalColor, rgba(red(@white), green(@white), blue(@white), .65));
                        text-decoration: none;
                        .transition(background .3s);
                        &:hover {
                            @bg: darken(@white, 10%);
                            .color(@globalColor, rgba(red(@bg), green(@bg), blue(@bg), .65));
                        }
                        &.active {
                            .color(@darkBlue);
                        }
                    }
                    &:first-child a {
                        .color(@white, @blue);
                        &:hover {
                            @bg: lighten(@blue, 10%);
                            .color(@white, @bg);
                        }
                    }
                }
            }
        }
    }
}

.content {
    .aux {
        position: relative;
        margin: 5px 50px 0 250px;
    }
    iframe {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 600px;
    }
    .product {
        position: relative;
        display: inline-block;
        width: 300px;
        height: 440px;
        margin: 5px 15px 20px;
        .color(@globalColor, @white);
        .shadow;
        img {
            width: 300px;
            height: 370px;
        }
        .remove {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            .color(@white, @black);
            text-align: center;
            padding: 40% 0;
            opacity: 0;
            .transition(opacity .3s);
            &:hover {
                opacity: .95;
            }
        }
    }
    .detail{
        padding-top:5px;
        margin-left:10px;
        margin-right:10px;
    }
}

.btn {
    display: inline-block;
    .color(@buttonColor, @buttonBg);
    border: 0;
    box-shadow: 0 .1em 0 darken(@buttonBg, 5%);
    .transition(background .3s);
    .input;
    &:hover {
        @bg: lighten(@buttonBg, 10%);
        .color(@buttonColor, @bg);
    }
    &.btn-primary {
        .color(@buttonColor, @buttonPriBg);
        box-shadow: 0 .1em 0 darken(@buttonPriBg, 5%);
        &:hover {
            @bg: lighten(@buttonPriBg, 10%);
            .color(@buttonColor, @bg);
        }
    }
    &.btn-highlight {
        .color(@buttonColor, @buttonHighlightBg);
        box-shadow: 0 .1em 0 darken(@buttonHighlightBg, 5%);
        &:hover {
            @bg: lighten(@buttonHighlightBg, 10%);
            .color(@buttonColor, @bg);
        }
    }
}

input {
    border: 1px solid @black;
    .input;
}

.alert {
    display: inline-block;
    padding: 0 8px;
    .color(@red);
    input& {
        border-color: #E13B1A;
    }
}

@media (max-width: 1024px) {
    .content .product {
        width: 225px;
        height: 337px;
        margin: 3px 8px 10px;
        img {
            width: 225px;
            height: 277px;
        }
    }
}
